<!DOCTYPE html>

<html>
<style type="text/css" media="screen">
    div {
        display: fl
    }
</style>

<body>
    <div id="app">
        <input type="button" value="changeColor" />
        <input type="date" name="" id="" value="" />
        <input type="date" name="" id="" value="" />
        <br />
        <textarea name="" rows="20" cols="20"></textarea>
        <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
        <my-component></my-component>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 1.创建一个组件构造器
    var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
    // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
    Vue.component('my-component', myComponent)

    new Vue({
        el: '#app',
        ready: function() {
            var btn = document.querySelector('input[type=button]');
            var aDate = document.querySelectorAll('input[type=date]');
            var text = document.querySelector('textarea');
            btn.onclick = function() {
                btn.style.backgroundColor = "deepskyblue";
                // var demo = (aDate[0].value) - (aDate[1].value)
                // alert(typeof aDate[0].value)
                var str1 = aDate[0].value;
                var str2 = aDate[1].value;

                var arr1 = str1.split('-').join('');
                var arr2 = str2.split('-').join('');

                text.innerHTML = "arr1:" + arr1 + '\n' + "arr2:" + arr2;
            }
        },
    })
</script>

</html>
